HTML & CSS / Bootstrap / Create website using bootstrap

Create New website

STEPS

1. Create an HTML Page



<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Tutorial Sample Page</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      
	</head>
    
	<body>
	</body>
	
</html>

2. Load Bootstrap via CDN


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

3. Add a Navigation Bar


<nav class="navbar navbar-expand-md">
	<a class="navbar-brand" href="#">Logo</a>
	<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
		<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="main-navigation">
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link" href="#">Home</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">About</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Contact</a>
			</li>
		</ul>
	</div>
</nav>

in css


body {
    padding: 0;
    margin: 0;
    background: #f2f6e9;
}
.navbar {
    background:#6ab446;
}
.nav-link,
.navbar-brand {
    color: #fff;
    cursor: pointer;
}
.nav-link {
    margin-right: 1em !important;
}
.nav-link:hover {
    color: #000;
}
.navbar-collapse {
    justify-content: flex-end;
}

4. Create a Page Content Container


<header class="page-header header container-fluid">
</header>

5. Include a Page Title and Body Text


<div class="description">
	<h1>Welcome to the Landing Page!</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Suspendisse consectetur mi id libero fringilla, in pharetra sem ullamcorper.</p>
</div>

css


.description {
	left: 50%;
	position: absolute;
	top: 45%;
	transform: translate(-50%, -55%);
	text-align: center;
}
.description h1 {
	color: #6ab446;
}
.description p {
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.5;
}

Output

6. Create a CTA Button


<button class="btn btn-outline-secondary btn-lg">Tell Me More!</button>

css


.description button {
    border:1px solid #6ab446;
    background:#6ab446;
    border-radius: 0;
    color:#fff;
}
.description button:hover {
	border:1px solid #fff;
    background:#fff;
    color:#000;
}

Output

7. Set Up a Three-Column Section


<div class="container features">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12">
            <h3 class="feature-title">Lorem ipsum</h3>
            <img src="images/column-1.jpg" class="img-fluid">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
        </div>
        
        <div class="col-lg-4 col-md-4 col-sm-12">
            <h3 class="feature-title">Lorem ipsum</h3>
            <img src="images/column-2.jpg" class="img-fluid">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
        </div>
        
        <div class="col-lg-4 col-md-4 col-sm-12">
        
        </div>
    </div>
</div>

css


.features {
	margin: 4em auto;
	padding: 1em;
	position: relative;
}
.feature-title {
	color: #333;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.features img {
	-webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
	margin-bottom: 16px;
}

Output

8. Add a Contact Form



<h3 class="feature-title">Get in Touch!</h3>
<div class="form-group">
	<input type="text" class="form-control" placeholder="Name" name="">
</div>
<div class="form-group">
    <input type="email" class="form-control" placeholder="Email Address" name="email">
</div>
<div class="form-group">
    <textarea class="form-control" rows="4"></textarea>
</div>
<input type="submit" class="btn btn-secondary btn-block" value="Send" name="">

css


.features .form-control,
.features input {
	border-radius: 0;
}
.features .btn {
    background-color: #589b37;
    border: 1px solid #589b37;
    color: #fff;
    margin-top: 20px;
}
.features .btn:hover {
    background-color: #333;
    border: 1px solid #333;
}

Output

9. Include a Team Section


<div class="background">
    <div class="container team">
        <div class="row">
            
        </div>
    </div>
</div>


<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
</div>

together code


<div class="card col-lg-3 col-md-3 col-sm-4 text-center">
    <img class="card-img-top rounded-circle" src="images/team-image-1.png" alt="Card image">
    <div class="card-body">
        <h4 class="card-title">Jane Doe</h4>
        <p class="card-text">Job Description</p>
    </div>
</div>

css


.background {
	background: #dedec8;
	padding: 4em 0;
}
.team {
	color: #5e5e55;
	padding: 0 180px;
}
.team .card-columns {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
}
.team .card {
	background:none;
	border: none;
}
.team .card-title {
	font-size: 1.3rem;
	margin-bottom: 0;
	text-transform: uppercase;
}

Output

10. Create a Two-Column Footer


<footer class="page-footer">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-12">
                <h6 class="text-uppercase font-weight-bold">Additional Information</h6>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-12">
            <h6 class="text-uppercase font-weight-bold">Contact</h6>
            <p>1640 Riverside Drive, Hill Valley, California
            <br/>info@mywebsite.com
            <br/>+ 01 234 567 88
            <br/>+ 01 234 567 89</p>
        </div>
    <div>
    <div class="footer-copyright text-center">© 2020 Copyright: MyWebsite.com</div>
</footer>

css


.page-footer {
    background-color: #222;
    color: #ccc;
    padding: 60px 0 30px;
}
.footer-copyright {
    color: #666;
    padding: 40px 0;
}

Output